<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .red {
      width: 100px;
      height: 100px;
      background-color: red;

      /*transition: width 1s ease,background-color .5s linear;*/
      /*transition: all .7s ease;*/

      transition: all;
      transition-duration: .7s;
      transition-timing-function: ease;
      /*transition-timing-function: ;*/
      /*
        技巧: 控制台F12/ 鼠标右建 - 检查   esc  可以调取  aninmations面板   - 专门用来调式动画
        参看 调试.png
      */
    }

    .red:hover {
      width: 500px;
      background-color: orangered;
    }
  </style>
</head>
<body>
<div class="red"></div>
</body>
</html>
